<!--通用Icon组件-->
<template>
  <div class="icon-wrapper" :style="{...iconStyle}">
    <svg class="icon">
      <use :href="iconName"></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Icon',
  props: {
    name: {
      type: String,
    },
    iconStyle: {
      type: Object,
    },
    prefix: {
      type: String,
      default: ''
    }
  },
  setup(ctx) {
    const iconName = `#${ctx.prefix}${ctx.name}`
    return {
      iconName,
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-wrapper {
  display: inline-block;

  .icon {
    width: 100%;
    height: 100%;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}


</style>
